<template>
  <div class="steps">
    <div class="steps-item step1">
      <div class="inner-content">
        <img
          width="27px"
          height="30px"
          :src="props.step1_src"
          alt=""
        >
        <span>{{ props.step1Msg }}</span>
      </div>
    </div>
    <div
      class="steps-item step2"
      :class="{ 'step2-active': props.currentStep >= 2 }"
    >
      <div class="inner-content">
        <img
          width="27px"
          height="30px"
          :src="currentStep >= 2 ? props.step2_active_src : props.step2_src"
        >
        <span>{{ props.step2Msg }}</span>
      </div>
    </div>
    <div
      class="steps-item step3"
      :class="{ 'step3-active': props.currentStep >= 3 }"
    >
      <div class="inner-content">
        <img
          width="27px"
          height="30px"
          :src="currentStep >= 3 ? props.step3_active_src : props.step3_src"
        >
        <span>{{ props.step3Msg }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
interface Props {
  currentStep: number
  step1Msg: string
  step2Msg: string
  step3Msg: string
  step1_src: string
  step2_src: string
  step3_src: string
  step2_active_src: string
  step3_active_src: string
}
const props = defineProps<Props>()
</script>

<style lang="less" scoped>
.steps {
  display: flex;
  color: #6c768e;
  justify-content: space-between;
  width: 100%;
  .steps-item {
    min-width: 30%;
    height: 106px;
  }
  .inner-content {
    padding-top: 8%;
    padding-left: 17%;
    span {
      margin-left: 19px;
    }
    img {
      height: 30px;
      width: 27px;
    }
  }
}

.step1 {
  background-image: url(/src/assets/icon/step1-active.svg);
  color: #ffffff;
  background-repeat: no-repeat;
}
.step2 {
  background-image: url(/src/assets/icon/step2.svg);
  color: #6c768e;
  background-repeat: no-repeat;
}

.step2-active {
  background-image: url(/src/assets/icon/step2-active.svg);
  color: #ffffff;
  background-repeat: no-repeat;
}

.step3 {
  background-image: url(/src/assets/icon/step3.svg);
  color: #6c768e;
  background-repeat: no-repeat;
}
.step3-active {
  background-image: url(/src/assets/icon/step3-active.svg);
  color: #ffffff;
  background-repeat: no-repeat;
}
</style>
